<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
    <title>Jcrop &raquo; Tutorials &raquo; API Demo</title>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
    <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
    <style type="text/css">
      .optdual { position: relative; }
      .optdual .offset { position: absolute; left: 18em; }
      .optlist label { width: 16em; display: block; }
      #dl_links { margin-top: .5em; }
    </style>
    <script type="text/javascript">

      jQuery(function($){

        // The variable jcrop_api will hold a reference to the
        // Jcrop API once Jcrop is instantiated.
        var jcrop_api;

        // In this example, since Jcrop may be attached or detached
        // at the whim of the user, I've wrapped the call into a function
        initJcrop();
        
        // The function is pretty simple
        function initJcrop()//{{{
        {
          // Hide any interface elements that require Jcrop
          // (This is for the local user interface portion.)
          $('.requiresjcrop').hide();

          // Invoke Jcrop in typical fashion
          $('#target').Jcrop({
            onRelease: releaseCheck
          },function(){

            jcrop_api = this;
            jcrop_api.animateTo([100,100,400,300]);

            // Setup and dipslay the interface for "enabled"
            $('#can_click,#can_move,#can_size').attr('checked','checked');
            $('#ar_lock,#size_lock,#bg_swap').attr('checked',false);
            $('.requiresjcrop').show();

          });

        };
        //}}}

        // Use the API to find cropping dimensions
        // Then generate a random selection
        // This function is used by setSelect and animateTo buttons
        // Mainly for demonstration purposes
        function getRandom() {
          var dim = jcrop_api.getBounds();
          return [
            Math.round(Math.random() * dim[0]),
            Math.round(Math.random() * dim[1]),
            Math.round(Math.random() * dim[0]),
            Math.round(Math.random() * dim[1])
          ];
        };

        // This function is bound to the onRelease handler...
        // In certain circumstances (such as if you set minSize
        // and aspectRatio together), you can inadvertently lose
        // the selection. This callback re-enables creating selections
        // in such a case. Although the need to do this is based on a
        // buggy behavior, it's recommended that you in some way trap
        // the onRelease callback if you use allowSelect: false
        function releaseCheck()
        {
          jcrop_api.setOptions({ allowSelect: true });
          $('#can_click').attr('checked',false);
        };

        // Attach interface buttons
        // This may appear to be a lot of code but it's simple stuff
        $('#setSelect').click(function(e) {
          // Sets a random selection
          jcrop_api.setSelect(getRandom());
        });
        $('#animateTo').click(function(e) {
          // Animates to a random selection
          jcrop_api.animateTo(getRandom());
        });
        $('#release').click(function(e) {
          // Release method clears the selection
          jcrop_api.release();
        });
        $('#disable').click(function(e) {
          // Disable Jcrop instance
          jcrop_api.disable();
          // Update the interface to reflect disabled state
          $('#enable').show();
          $('.requiresjcrop').hide();
        });
        $('#enable').click(function(e) {
          // Re-enable Jcrop instance
          jcrop_api.enable();
          // Update the interface to reflect enabled state
          $('#enable').hide();
          $('.requiresjcrop').show();
        });
        $('#rehook').click(function(e) {
          // This button is visible when Jcrop has been destroyed
          // It performs the re-attachment and updates the UI
          $('#rehook,#enable').hide();
          initJcrop();
          $('#unhook,.requiresjcrop').show();
          return false;
        });
        $('#unhook').click(function(e) {
          // Destroy Jcrop widget, restore original state
          jcrop_api.destroy();
          // Update the interface to reflect un-attached state
          $('#unhook,#enable,.requiresjcrop').hide();
          $('#rehook').show();
          return false;
        });

        // Hook up the three image-swapping buttons
        $('#img1').click(function(e) {
          jcrop_api.setImage('demo_files/sago.jpg');
          jcrop_api.setOptions({ bgOpacity: .6 });
          return false;
        });
        $('#img2').click(function(e) {
          jcrop_api.setImage('demo_files/pool.jpg');
          jcrop_api.setOptions({ bgOpacity: .6 });
          return false;
        });
        $('#img3').click(function(e) {
          jcrop_api.setImage('demo_files/sago.jpg',function(){
            this.setOptions({
              bgOpacity: 1,
              outerImage: 'demo_files/sagomod.jpg'
            });
            this.animateTo(getRandom());
          });
          return false;
        });

        // The checkboxes simply set options based on it's checked value
        // Options are changed by passing a new options object

        // Also, to prevent strange behavior, they are initially checked
        // This matches the default initial state of Jcrop

        $('#can_click').change(function(e) {
          jcrop_api.setOptions({ allowSelect: !!this.checked });
          jcrop_api.focus();
        });
        $('#can_move').change(function(e) {
          jcrop_api.setOptions({ allowMove: !!this.checked });
          jcrop_api.focus();
        });
        $('#can_size').change(function(e) {
          jcrop_api.setOptions({ allowResize: !!this.checked });
          jcrop_api.focus();
        });
        $('#ar_lock').change(function(e) {
          jcrop_api.setOptions(this.checked?
            { aspectRatio: 4/3 }: { aspectRatio: 0 });
          jcrop_api.focus();
        });
        $('#size_lock').change(function(e) {
          jcrop_api.setOptions(this.checked? {
            minSize: [ 80, 80 ],
            maxSize: [ 350, 350 ]
          }: {
            minSize: [ 0, 0 ],
            maxSize: [ 0, 0 ]
          });
          jcrop_api.focus();
        });

      });

    </script>

  </head>

  <body>
    <div id="outer">
    <div class="jcExample">
    <div class="article">

      <h1>Jcrop - API Demo</h1>
      <img src="demo_files/sago.jpg" id="target" alt="Jcrop Image" />

      <div style="margin: .8em 0 .5em;">
        <span class="requiresjcrop">
          <button id="setSelect">setSelect</button>
          <button id="animateTo">animateTo</button>
          <button id="release">Release</button>
          <button id="disable">Disable</button>
        </span>
        <button id="enable" style="display:none;">Re-Enable</button>
        <button id="unhook">Destroy!</button>
        <button id="rehook" style="display:none;">Attach Jcrop</button>
      </div>

      <fieldset class="optdual requiresjcrop">
        <legend>Option Toggles</legend>
        <div class="optlist offset">
          <label><input type="checkbox" id="ar_lock" />Aspect ratio</label>
          <label><input type="checkbox" id="size_lock" />minSize/maxSize setting</label>
        </div>
        <div class="optlist">
          <label><input type="checkbox" id="can_click" />Allow new selections</label>
          <label><input type="checkbox" id="can_move" />Selection can be moved</label>
          <label><input type="checkbox" id="can_size" />Resizable selection</label>
        </div>
      </fieldset>

      <fieldset class="requiresjcrop" style="margin: .5em 0;">
        <legend>Change Image</legend>
        <span>
          <button id="img2">Pool</button>
          <button id="img1">Sago</button>
          <button id="img3">Sago w/ outerImage</button>
        </span>
      </fieldset>

    <div id="dl_links">
      <a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
      <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
    </div>

    </div>
    </div>
    </div>
  </body>
</html>

